<template>
	<view>
		<view class="sqkp-wrap">
			<view class="sqkp-wrap_geren">
				<view class="sqlp-kpxx">
					<view class="kpxx-wrap">
						<view class="kpxx-list">
							<view class="kpxx-list_title">
								<text class="zhanwei"></text>
								发票金额
							</view>
							<view class="kpxx-list_input"><input type="text" placeholder="" v-model="jine" class="kpxx-input" disabled="true" /></view>
						</view>

						<view class="kpxx-list">
							<view class="kpxx-list_title">
								<text class="zhanwei">*</text>
								发票抬头
							</view>
							<view class="kpxx-list_input"><input type="text" placeholder="" v-model="fapiao_taitou" class="kpxx-input" /></view>
						</view>

						<view class="kpxx-list">
							<view class="kpxx-list_title">
								<text class="zhanwei">*</text>
								税号
							</view>
							<view class="kpxx-list_input"><input type="text" placeholder="税号" v-model="fapiao_shuihao" class="kpxx-input" /></view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title">
								<text class="zhanwei">*</text>
								发票类型
							</view>
						<!-- <view class="kpxx-list_input" v-if="fapiao_fapiaolx">
								<xfl-select
									ref="xfl"
									:list="list2"
									:clearable="false"
									:showItemNum="5"
									:listShow="false"
									:isCanInput="false"
									:style_Container="'height: 35px; font-size: 16px; color:#333;'"
									placeholder="发票类型"
									:initValue="fapiao_fapiaolx"
									:selectHideType="'hideAll'"
									@change="selectChange"
								></xfl-select>
							</view> -->
							<view class="kpxx-list_input"><input type="text" placeholder="" v-model="fapiao_fapiaolx" class="kpxx-input" disabled="true" /></view>
						</view>
						<view class="kpxx-list" :style="iszhuanpiao == 1 ? 'display:none' : ''">
							<view class="kpxx-list_title">
								<text class="zhanwei">*</text>
								电子邮箱
							</view>
							<view class="kpxx-list_input"><input type="text" placeholder="电子邮箱" v-model="fapiao_mail" class="kpxx-input" /></view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title">
								<text class="zhanwei"></text>
								注册地址
							</view>
							<view class="kpxx-list_input"><input type="text" v-model="fapaio_kaihuDizhi" placeholder="地址" class="kpxx-input" /></view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title">
								<text class="zhanwei"></text>
								注册电话
							</view>
							<view class="kpxx-list_input"><input type="text" v-model="fapaio_kaihuDianhua" placeholder="电话" class="kpxx-input" /></view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title">
								<text class="zhanwei"></text>
								开户银行
							</view>
							<view class="kpxx-list_input"><input type="text" v-model="fapiao_kaihuhang" placeholder="开户行" class="kpxx-input" /></view>
						</view>
						<view class="kpxx-list">
							<view class="kpxx-list_title">
								<text class="zhanwei"></text>
								开户行账号
							</view>
							<view class="kpxx-list_input"><input type="text" v-model="fapiao_kaihuZhanghao" placeholder="开户行账号" class="kpxx-input" /></view>
						</view>
						<view class="kpxx-list" :style="iszhuanpiao == 1 ? '' : 'display:none'">
							<view class="kpxx-list_title">
								<text class="zhanwei">*</text>
								收件人
							</view>
							<view class="kpxx-list_input"><input type="text" v-model="shoujianren" placeholder="收件人" class="kpxx-input" /></view>
						</view>
						<view class="kpxx-list" :style="iszhuanpiao == 1 ? '' : 'display:none'">
							<view class="kpxx-list_title">
								<text class="zhanwei">*</text>
								联系电话
							</view>
							<view class="kpxx-list_input"><input type="text" v-model="lianxidianhua" placeholder="联系电话" class="kpxx-input" /></view>
						</view>
						<view class="kpxx-list" :style="iszhuanpiao == 1 ? '' : 'display:none'">
							<view class="kpxx-list_title">
								<text class="zhanwei">*</text>
								收件地址
							</view>
							<view class="kpxx-list_input" style="color: #333; font-size: 30rpx;">
								<input type="text" v-model="shoujiandizhi" placeholder="收件地址" class="kpxx-input" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="queren-btn" @click="submitConfirm()">确认并提交</view>
		<!-- 弹窗提示 -->
		<uni-popup ref="showpopup" :type="type" :maskClick="false">
			<view class="submitPopup">
				<view class="submit-title">提示</view>
				<view class="submit-text">{{ iszhuanpiao == 1 ? '发票申请成功' : '发票将发送至您的邮箱，请注意查收！' }}</view>
				<view class="sumbit-btn">
					<view class="btn1" @click="backuser()">返回个人中心</view>
					<view class="btn2" @click="backindex()">返回首页</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import tabControl from '@/components/tabControl-tag/tabControl-fapiao.vue';
import xflSelect from '@/components/xfl-select/xfl-select.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import commonjs from '@/common/script/common.js';
// let isedit = 0;
export default {
	components: {},
	data() {
		return {
			fapiaoid:'',
			type: 'popup',
			fapaio_kaihuDianhua: '',
			fapaio_kaihuDizhi: '',
			fapiao_fapiaolx: '',
			fapiao_kaihuZhanghao: '',
			fapiao_kaihuhang: '',
			fapiao_mail: '',
			fapiao_shuihao: '',
			fapiao_taitou: '',
			jine: '',
			lianxidianhua: '',
			iszhuanpiao: '',
			shoujiandizhi: '',
			shoujianren: '',
			list2: [
				{
					value: '普通发票',
					text: '普通发票'
				},
				{
					value: '增值税专用发票',
					text: '增值税专用发票'
				},
				{
					value: '收据',
					text: '收据'
				}
			]
		};
	},

	onLoad(options) {
		this.fapiaoid=options.fapiaoid
		this.bind(options.fapiaoid);
	},
	onShow() {},
	methods: {
		backuser() {
			uni.switchTab({
				url: '/pages/user/user'
			});
		},
		backindex() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		selectChange(e) {
			this.fapiao_fapiaolx = e.orignItem.text;
			if (this.fapiao_fapiaolx == '增值税专用发票') {
				this.iszhuanpiao = 1;
			} else {
				this.iszhuanpiao = 0;
			}
		},
		bind(id) {
			let data = this.initNewData();
			data.location = 5211;
			data.id = id;
			uni.request({
				url: this.baseConfig.serverURL + 'user/fapiao/FapiaoBindHandler.ashx', //检查更新的服务器地址
				data: data,
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded' //"application/json"
				},
				success: result => {
					if (result.statusCode == 200) {
						if (result.data.ret) {
							// this.jine=
							const {
								fapaio_kaihuDianhua,
								fapaio_kaihuDizhi,
								fapiao_fapiaolx,
								fapiao_kaihuZhanghao,
								fapiao_kaihuhang,
								fapiao_mail,
								fapiao_shuihao,
								fapiao_taitou,
								fapiao_shoujianren,
								fapiao_tel,
								fapiao_dizhi,
								jine
							} = result.data.other2;
							this.fapaio_kaihuDianhua = fapaio_kaihuDianhua;
							this.fapaio_kaihuDizhi = fapaio_kaihuDizhi;
							this.fapiao_fapiaolx = fapiao_fapiaolx;
							this.fapiao_kaihuZhanghao = fapiao_kaihuZhanghao;
							this.fapiao_kaihuhang = fapiao_kaihuhang;
							this.fapiao_mail = fapiao_mail;
							this.fapiao_shuihao = fapiao_shuihao;
							this.fapiao_taitou = fapiao_taitou;
							this.jine = jine;
							this.iszhuanpiao = fapiao_fapiaolx === '增值税专用发票' ? 1 : 0;
							this.shoujianren=fapiao_shoujianren;
							this.lianxidianhua=fapiao_tel;
							this.shoujiandizhi=fapiao_dizhi;
							
						} else {
							uni.showToast({
								title: result.data.msg,
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: '开票信息获取失败',
							icon: 'none'
						});
					}
				},
				fail: e => {
					uni.showToast({
						title: '开票信息获取失败，可能网络超时',
						icon: 'none'
					});
				}
			});
		},
		submitConfirm() {
			// 前端校验
			const {
				fapaio_kaihuDianhua,
				fapaio_kaihuDizhi,
				fapiao_fapiaolx,
				fapiao_kaihuZhanghao,
				fapiao_kaihuhang,
				fapiao_mail,
				fapiao_shuihao,
				fapiao_taitou,
				jine,
				lianxidianhua,
				shoujianren,
				iszhuanpiao,
				shoujiandizhi
			} = this;
			if(!fapiao_taitou){
				uni.showToast({
					title: '请输入发票抬头',
					icon: 'none'
				});
				return;
			}else if(!fapiao_shuihao){
				uni.showToast({
					title: '请输入税号',
					icon: 'none'
				});
				return;
			}else if(!fapiao_fapiaolx){
				uni.showToast({
					title: '请选择发票类型',
					icon: 'none'
				});
				return;
			}else if(!fapaio_kaihuDizhi){
				uni.showToast({
					title: '请输入注册地址',
					icon: 'none'
				});
				return;
			}else if(!fapaio_kaihuDianhua){
				uni.showToast({
					title: '请输入注册电话',
					icon: 'none'
				});
				return;
			}else if(!fapiao_kaihuhang){
				uni.showToast({
					title: '请输入开户银行',
					icon: 'none'
				});
				return;
			}else if(!fapiao_kaihuZhanghao){
				uni.showToast({
					title: '请输入开户行帐号',
					icon: 'none'
				});
				return;
			}else if(iszhuanpiao === 1 ){
				if(!shoujianren){
					uni.showToast({
						title: '请输入收件人信息',
						icon: 'none'
					});
					return;
				}else if(!lianxidianhua){
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					});
					return;
				}else if(!shoujiandizhi){
					uni.showToast({
						title: '请输入收件地址',
						icon: 'none'
					});
					return;
				}
				
			}
			/**
			 * 驳回后，直接修改申请信息；提交时提醒：“是否同步到开票信息?"
			 * 在修改申请信息前提下，如果选择“是”，更新开票信息表，如果否，则没有更新逻辑
			 */
			const me = this;
			let isupdateKaiPiao = 0;
			uni.showModal({
				title: '',
				content: '是否同步到开票信息?',
				success: function(res) {
					if (res.confirm) {
						isupdateKaiPiao = 1;
					}
					me.submit(isupdateKaiPiao);
				}
			});
		},
		submit(isupdateKaiPiao) {
			let appid = '';
			// #ifdef APP-PLUS
			appid = plus.runtime.appid;
			// #endif
			let data = this.initNewData();
			data.location = 5211;
			data.appid = appid;
			const {
				fapaio_kaihuDianhua,
				fapaio_kaihuDizhi,
				fapiao_fapiaolx,
				fapiao_kaihuZhanghao,
				fapiao_kaihuhang,
				fapiao_mail,
				fapiao_shuihao,
				fapiao_taitou,
				jine,
				lianxidianhua,
				shoujianren,
				iszhuanpiao,
				shoujiandizhi
			} = this;

			// if (this.iszhuanpiao == 1 && this.jine < 1000) {
			// 	uni.showToast({
			// 		title: '发票金额小于1000元，我们将为开具普通发票，请您更换开票信息！',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			data.fapiaoid = this.fapiaoid;
			data.fapiao_shuihao = fapiao_shuihao;
			data.fapiao_taitou = fapiao_taitou;
			data.fapiao_fapiaolx = fapiao_fapiaolx;
			data.fapiao_mail = fapiao_mail;
			data.fapaio_kaihuDianhua = fapaio_kaihuDianhua;
			data.fapaio_kaihuDizhi = fapaio_kaihuDizhi;
			data.iszhuanpiao = iszhuanpiao;
			data.fapiao_kaihuZhanghao = fapiao_kaihuZhanghao;
			data.fapiao_kaihuhang = fapiao_kaihuhang;
			data.fapiao_shoujianren = shoujianren;
			// data.jine = jine;
			data.fapiao_tel = lianxidianhua;
			data.fapiao_dizhi = shoujiandizhi;
			data.isupdateKaiPiao = isupdateKaiPiao;
			uni.request({
				url: this.baseConfig.serverURL + 'user/fapiao/FaPiaoEditHandler.ashx', //检查更新的服务器地址
				data: data,
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded' //"application/json"
				},
				success: result => {
					if (result.statusCode == 200) {
						if (!result.data.ret) {
							uni.showToast({
								title: result.data.msg,
								icon: 'none'
							});
						} else {
							this.type = 'center';
							this.$refs['showpopup'].open();
						}
					} else {
						uni.showToast({
							title: '提交失败,请重试！',
							icon: 'none'
						});
					}
				},
				fail: e => {
					uni.showToast({
						title: '提交失败,请重试！',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f4f4;
	height: 100%;
}

.sqkp-wrap_geren {
	margin: 30rpx;

	.sqlp-kpxx {
		.kpxx-section {
			font-size: 34rpx;
			padding: 20rpx 0;
		}

		.kpxx-wrap {
			background-color: #fff;
			border-radius: 10rpx;

			.kpxx-list {
				padding: 20rpx 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #f5f5f5;

				.kpxx-list_title {
					font-size: 32rpx;

					.zhanwei {
						width: 30px;
						color: rgb(255, 0, 0);
						display: inline-block;
						text-align: center;
						font-weight: 700;
						font-size: 30rpx;
						vertical-align: middle;
					}
				}

				.kpxx-list_input {
					margin: 0 30rpx;
					font-size: 26rpx;
					color: #aaaaaa;
					display: flex;
					flex: 1;
					justify-content: flex-end;

					.kpxx-input {
						font-size: 30rpx;
						color: #000;
						text-align: right;
					}

					.right-icon {
						width: 30rpx;
						height: 30rpx;
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
}

.queren-btn {
	margin: 20rpx 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #0099ff;
	padding: 20rpx 0;
	color: #fff;
	border-radius: 10rpx;
	font-size: 30rpx;
}

.submitPopup {
	width: 80%;
	background-color: #fff;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: 10%;

	.submit-title {
		font-size: 32rpx;
		padding: 20rpx 0;
	}

	.submit-text {
		font-size: 28rpx;
		padding-bottom: 20rpx;
	}

	.sumbit-btn {
		border-top: 1px solid #e0e0e0;
		width: 100%;
		text-align: center;
		padding: 20rpx 0;
		color: #2d96fd;
		font-size: 32rpx;
	}
}

.sumbit-btn {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	.btn1 {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		background-color: #fff;
		border: 1px solid #2684ff;
		color: #2684ff;
		width: 40%;
		margin: 0 30rpx;
		border-radius: 10rpx;
	}

	.btn2 {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		background-color: #2684ff;
		border: 1px solid #2684ff;
		color: #ffffff;
		width: 30%;
		margin: 0 30rpx;
		border-radius: 10rpx;
	}
}
</style>
